<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <el-row :gutter="20">
      <el-col :span="18">
        <el-card shadow="never">
          <p style="margin: 0 0 35px 0;font-size: 16px;">数据看板</p>
          <el-row>
            <el-col :span="4">
              <card-item title="经营户数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="tradingData.businessCount"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
            <el-col :span="7">
              <card-item title="成交金额">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="tradingData.saleAmount" :decimals="2">
                      <span class="left" slot="left">￥</span>
                      <span class="right" slot="right">{{unit1}}</span>
                    </count-up>
                  </div>
                  <div slot="desc" class="desc">
                    <span>
                      昨日: {{tradingData.yesterdaySaleAmount}}
                      <span>{{unit2}}</span>
                    </span>
                    <span style="padding-left: 10px;">
                      变化率:
                      <span v-html="tradingData.saleAmountTrend"></span>
                    </span>
                  </div>
                </template>
              </card-item>
            </el-col>
            <el-col :span="7">
              <card-item title="成交笔数">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="tradingData.payNumber"></count-up>
                  </div>
                  <div slot="desc" class="desc">
                    <span>
                      昨日: {{tradingData.yesterdayPayNumber}}
                    </span>
                    <span style="padding-left: 10px;">
                      变化率:
                      <span v-html="tradingData.payNumberTrend"></span>
                    </span>
                  </div>
                </template>
              </card-item>
            </el-col>
            <el-col :span="6">
              <card-item title="去重客流">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="tradingData.today_count"></count-up>
                  </div>
                  <div slot="desc" class="desc">
                    <span>
                      昨日: {{tradingData.yeserday_count}}
                    </span>
                    <span style="padding-left: 10px;">
                      变化率:
                      <span v-html="tradingData.amount_trend"></span>
                    </span>
                  </div>
                </template>
              </card-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="never">
          <p style="margin: 0 0 20px 0;font-size: 16px;">分时数据</p>
          <chart :options="options" style="height: 350px;"></chart>
        </el-card>
        <el-row :gutter="22">
          <el-col :span="12">
            <el-card shadow="never">
              <p style="margin: 0 0 20px 0;font-size: 16px;">六大类交易额占比图</p>
              <chart :options="sixTypeOptionsNew" style="height: 350px;"></chart>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="never">
              <p style="margin: 0 0 20px 0;font-size: 16px;">检测信息</p>
              <div>
                <el-table :data="checkReportData" style="width: 100%;margin: 5px 0 5px;">
                  <el-table-column prop="businessName" label="商户名称"></el-table-column>
                  <el-table-column prop="sampleName" label="产品名称"></el-table-column>
                  <el-table-column prop="testResults" label="检测值"></el-table-column>
                  <el-table-column prop="isQualifiedName" label="检测结论"></el-table-column>
                </el-table>
                <el-pagination
                  :page-size="checkReportPage.perPage"
                  :current-page="checkReportPage.page"
                  :total="checkReportPage.total"
                  @current-change="changeCheckReport"
                  style="margin-top: 15px;"
                  background
                  layout="prev, pager, next"
                ></el-pagination>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <!-- <p style="margin: 0 0 20px 0;font-size: 16px;">日期 / 天气</p> -->
          <p>
            <el-tag style="color: #409eff;font-size: 16px;border: none;margin: 0 5px;">{{weather.date}}</el-tag>
            <el-tag style="color: #409eff;font-size: 16px;border: none;margin: 0 5px;">{{weather.week}}</el-tag>
          </p>
          <p>
            <el-tag style="color: #2ec7c9;font-size: 16px;border: none;margin: 0 5px;">今日{{weather.type}}</el-tag>
            <el-tag style="color: #2ec7c9;font-size: 16px;border: none;margin: 0 5px;">{{weather.high}}</el-tag>
            <el-tag style="color: #2ec7c9;font-size: 16px;border: none;margin: 0 5px;">{{weather.low}}</el-tag>
          </p>
          <p>
            <el-tag style="color: #e6a23c;font-size: 16px;border: none;margin: 0 5px;">今日{{weather.notice}}!</el-tag>
          </p>
        </el-card>
        <el-card shadow="never">
          <p style="margin: 0 0 30px 0;font-size: 16px;">购进信息</p>
          <div style="border: 1px solid #eee;padding: 20px 20px 0;margin: 10px 0 20px;">
            <div style="margin: 0 0 20px;font-size: 16px;">猪肉</div>
            <el-row>
              <el-col :span="12">
                <card-item title="已填报">
                  <template slot="number">
                    <div class="number">
                      <count-up :end-val="modal.porkExistPurchase"></count-up>
                    </div>
                  </template>
                </card-item>
              </el-col>
              <el-col :span="12">
                <card-item title="未填报">
                  <template slot="number">
                    <div class="number">
                      <count-up :end-val="modal.porkNotExistPurchase"></count-up>
                    </div>
                  </template>
                </card-item>
              </el-col>
            </el-row>
          </div>
          <div style="border: 1px solid #eee;padding: 20px 20px 0;margin: 10px 0 20px;">
            <div style="margin: 0 0 20px;font-size: 16px;">牛羊肉</div>
            <el-row>
              <el-col :span="12">
                <card-item title="已填报">
                  <template slot="number">
                    <div class="number">
                      <count-up :end-val="modal.beefExistPurchase"></count-up>
                    </div>
                  </template>
                </card-item>
              </el-col>
              <el-col :span="12">
                <card-item title="未填报">
                  <template slot="number">
                    <div class="number">
                      <count-up :end-val="modal.beefNotExistPurchase"></count-up>
                    </div>
                  </template>
                </card-item>
              </el-col>
            </el-row>
          </div>
          <div style="border: 1px solid #eee;padding: 20px 20px 0;margin: 10px 0 20px;">
            <div style="margin: 0 0 20px;font-size: 16px;">豆制品</div>
            <el-row>
              <el-col :span="12">
                <card-item title="已填报">
                  <template slot="number">
                    <div class="number">
                      <count-up :end-val="modal.soyExistPurchase"></count-up>
                    </div>
                  </template>
                </card-item>
              </el-col>
              <el-col :span="12">
                <card-item title="未填报">
                  <template slot="number">
                    <div class="number">
                      <count-up :end-val="modal.soyNotExistPurchase"></count-up>
                    </div>
                  </template>
                </card-item>
              </el-col>
            </el-row>
          </div>
          <div style="border: 1px solid #eee;padding: 20px 20px 0;margin: 10px 0 20px;">
            <div style="margin: 0 0 20px;font-size: 16px;">禽类</div>
            <el-row>
              <el-col :span="12">
                <card-item title="已填报">
                  <template slot="number">
                    <div class="number">
                      <count-up :end-val="modal.chickenExistPurchase"></count-up>
                    </div>
                  </template>
                </card-item>
              </el-col>
              <el-col :span="12">
                <card-item title="未填报">
                  <template slot="number">
                    <div class="number">
                      <count-up :end-val="modal.chickenNotExistPurchase"></count-up>
                    </div>
                  </template>
                </card-item>
              </el-col>
            </el-row>
          </div>
          <div style="border: 1px solid #eee;padding: 20px 20px 0;margin: 10px 0 20px;">
            <div style="margin: 0 0 20px;font-size: 16px;">蛋类</div>
            <el-row>
              <el-col :span="12">
                <card-item title="已填报">
                  <template slot="number">
                    <div class="number">
                      <count-up :end-val="modal.eggExistPurchase"></count-up>
                    </div>
                  </template>
                </card-item>
              </el-col>
              <el-col :span="12">
                <card-item title="未填报">
                  <template slot="number">
                    <div class="number">
                      <count-up :end-val="modal.eggNotExistPurchase"></count-up>
                    </div>
                  </template>
                </card-item>
              </el-col>
            </el-row>
          </div>
          <div style="border: 1px solid #eee;padding: 20px 20px 0;margin: 10px 0 20px;">
            <div style="margin: 0 0 20px;font-size: 16px;">蔬菜</div>
            <el-row>
              <el-col :span="12">
                <card-item title="已填报">
                  <template slot="number">
                    <div class="number">
                      <count-up :end-val="modal.vegeExistPurchase"></count-up>
                    </div>
                  </template>
                </card-item>
              </el-col>
              <el-col :span="12">
                <card-item title="未填报">
                  <template slot="number">
                    <div class="number">
                      <count-up :end-val="modal.vegeNotExistPurchase"></count-up>
                    </div>
                  </template>
                </card-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import Chart from '@/components/Charts'
import CountUp from '@/components/CountUp/index'
import CardItem from '@/components/CardItem/index'
import { saleAmount, formatDate, trend } from '@/utils'
import Cookies from 'js-cookie'
import store from '@/store'

export default {
  name: 'home',
  components: {
    CountUp,
    CardItem,
    Chart
  },
  data(){
    return {
      sixTypeOptionsNew: {},
      date: formatDate(new Date()),

      // 数据看板
      tradingData: {
        businessCount: 0,  // 经营户数量

        saleAmount: 0,  // 	int	今日成交金额	分
        yesterdaySaleAmount: 0,  // 	int	昨日成交金额	分
        saleAmountTrend: '',  // 	string	成交金额环比变化率

        payNumber: 0,  // 	int	今日交易笔数
        yesterdayPayNumber: 0,  // 	int	昨日交易笔数
        payNumberTrend: '',  // 	string	交易笔数环比变化率

        today_count: 0,    // 去重客流	int	今日人数
        yeserday_count: 0, // 	int	昨日人数
        amount_trend: ''  // 	string	变化率
      },
      unit1: '',  // 总数据看板 数据单位
      unit2: '',  // 总数据看板 数据单位

      todaySales: 0,

      // 分时数据
      isExist: 0,  // isExist  int类型 1有阅客 0 无阅克

      // 检测信息
      checkReportData: [],
      checkReportPage: {
        perPage: 10, // 每页显示10条
        page: 1, // 当前页
        total: 0
      },

      // 购进信息
      modal: {
        porkExistPurchase: 0,  //猪肉已填报数量
        porkNotExistPurchase: 0,  //猪肉未填报数量
        beefExistPurchase: 0,  //牛羊肉已填报数量
        beefNotExistPurchase: 0,  //牛羊肉未填报数量
        soyExistPurchase: 0,  //豆制品已填报数量
        soyNotExistPurchase: 0,  //豆制品未填报数量
        chickenExistPurchase: 0,  //禽类已填报数量
        chickenNotExistPurchase: 0,  //禽类未填报数量
        eggExistPurchase: 0,  //蛋类已填报数量
        eggNotExistPurchase: 0,  //蛋类未填报数量
        vegeExistPurchase: 0, //	int	蔬菜已填报数量
        vegeNotExistPurchase: 0 //	int	蔬菜未填报数量
      },

      // 南京天气
      weather: {}

    }
  },
   watch: {
    '$store.state.app.marketId'(val, oldVal){

      // 20200303

      const marketId = store.state.app.marketId

      // 获取今年 年 月 日
      const myDate = new Date()
      const year = myDate.getFullYear()
      const month = myDate.getMonth() + 1
      const day = myDate.getDate()

      // 获取今年 昨日
      const time = (new Date).getTime()-24*60*60*1000
      const yesterday = new Date(time)
      const yesterdayMonth = yesterday.getMonth() + 1
      const yesterdayDay = yesterday.getDate()

      // 笔数
      let getDataEpay = this.getDataSales(year, month, day, marketId)
      let getDataYesterdayEpay = this.getDataYesterdaySales(year, yesterdayMonth, yesterdayDay, marketId)
      Promise.all([getDataEpay,getDataYesterdayEpay]).then((result) => {
        this.tradingData.payNumber = result[0].data.data.DocCount

        this.tradingData.yesterdayPayNumber = result[1].data.data.DocCount

        if(this.tradingData.yesterdayPayNumber == 0){
          this.tradingData.payNumberTrend = '-'
        }else{
          this.tradingData.payNumberTrend = (this.tradingData.payNumber - this.tradingData.yesterdayPayNumber) / this.tradingData.yesterdayPayNumber * 100
          this.tradingData.payNumberTrend = this.tradingData.payNumberTrend.toFixed(2) + '%'
        }
      })

      // 销售额
      let getDataSales = this.getDataSales(year, month, day, marketId)
      let getDataYesterdaySales = this.getDataYesterdaySales(year, yesterdayMonth, yesterdayDay, marketId)
      Promise.all([getDataSales,getDataYesterdaySales]).then((result) => {
        this.todaySales = result[0].data.data.Sales
        this.tradingData.saleAmount = parseFloat(saleAmount(result[0].data.data.Sales / 1)[0])
        this.unit1 = saleAmount(result[0].data.data.Sales / 1)[1]

        this.tradingData.yesterdaySaleAmount = parseFloat(saleAmount(result[1].data.data.Sales / 1)[0])
        this.unit2 = saleAmount(result[1].data.data.Sales / 1)[1]
        if(this.tradingData.yesterdaySaleAmount == 0){
          this.tradingData.saleAmountTrend = '-'
        }else{
          this.tradingData.saleAmountTrend = (this.todaySales - result[1].data.data.Sales) / result[1].data.data.Sales * 100
          this.tradingData.saleAmountTrend = this.tradingData.saleAmountTrend.toFixed(2) + '%'
        }
      })

      // 分时数据
      this.$store.dispatch('home/fetchChartListNew', {year, month, day, marketId})
      // 六大类占比图
      this.getSixTypeDataNew(marketId)

      // 20200303



      /*const marketData = JSON.parse(Cookies.get('MarketData'))
      for(let i=0;i<marketData.length;i++){
        if(marketData[i].id === val){
          this.isExist = marketData[i].isExist
        }
      }*/
      // 总数据看板 123  经营户数量
       this.getTradingData(this.date)
      // 总数据看板 4
       this.getPeopleCountData(this.date)
      // 分时数据
      // this.getChartLineBar(this.date,this.isExist)
      // 检测信息
      this.getCheckReportData(this.date,this.checkReportPage.perPage,this.checkReportPage.page)
      // 六大类占比图
      // this.getSixTypeData(this.date)
      // 购进信息
      this.getPurchaseCountInfo(this.date)
      // 获取南京天气
      this.getNJWeather(this.date)
    }
  },
  computed: {
    ...mapGetters(['name']),
    // 分时数据 \ 六大类占比图
    ...mapState('home',['options', 'sixTypeOptions'])
  },
  mounted(){
    /*const marketData = JSON.parse(Cookies.get('MarketData'))
    if(marketData[0].isExist === 1){
      this.isExist = 1
    }else if(marketData[0].isExist === 0){
      this.isExist = 0
    }*/

    // 20200303

    const marketId = store.state.app.marketId

    // 获取今年 年 月 日
    const myDate = new Date()
    const year = myDate.getFullYear()
    const month = myDate.getMonth() + 1
    const day = myDate.getDate()

    // 获取今年 昨日
    const time = (new Date).getTime()-24*60*60*1000
    const yesterday = new Date(time)
    const yesterdayMonth = yesterday.getMonth() + 1
    const yesterdayDay = yesterday.getDate()

    // 笔数
    let getDataEpay = this.getDataSales(year, month, day, marketId)
    let getDataYesterdayEpay = this.getDataYesterdaySales(year, yesterdayMonth, yesterdayDay, marketId)
    Promise.all([getDataEpay,getDataYesterdayEpay]).then((result) => {
      this.tradingData.payNumber = result[0].data.data.DocCount

      this.tradingData.yesterdayPayNumber = result[1].data.data.DocCount

      if(this.tradingData.yesterdayPayNumber === 0){
        this.tradingData.payNumberTrend = '-'
      }else{
        this.tradingData.payNumberTrend = (this.tradingData.payNumber - this.tradingData.yesterdayPayNumber) / this.tradingData.yesterdayPayNumber * 100
        this.tradingData.payNumberTrend = this.tradingData.payNumberTrend.toFixed(2) + '%'
      }
    })

    // 销售额
    let getDataSales = this.getDataSales(year, month, day, marketId)
    let getDataYesterdaySales = this.getDataYesterdaySales(year, yesterdayMonth, yesterdayDay, marketId)
    Promise.all([getDataSales,getDataYesterdaySales]).then((result) => {
      this.todaySales = result[0].data.data.Sales
      this.tradingData.saleAmount = parseFloat(saleAmount(result[0].data.data.Sales / 1)[0])
      this.unit1 = saleAmount(result[0].data.data.Sales / 1)[1]

      this.tradingData.yesterdaySaleAmount = parseFloat(saleAmount(result[1].data.data.Sales / 1)[0])
      this.unit2 = saleAmount(result[1].data.data.Sales / 1)[1]
      if(this.tradingData.yesterdaySaleAmount === 0){
        this.tradingData.saleAmountTrend = '-'
      }else{
        this.tradingData.saleAmountTrend = (this.todaySales - result[1].data.data.Sales) / result[1].data.data.Sales * 100
        this.tradingData.saleAmountTrend = this.tradingData.saleAmountTrend.toFixed(2) + '%'
      }
    })

    // 分时数据
    this.$store.dispatch('home/fetchChartListNew', {year, month, day, marketId})
    // 六大类占比图
    this.getSixTypeDataNew(marketId)

    // 20200303




    // 总数据看板 123 经营户数量
     this.getTradingData(this.date)
    // 总数据看板 4
     this.getPeopleCountData(this.date)
    // 分时数据
    // this.getChartLineBar(this.date,this.isExist)
    // 检测信息
    this.getCheckReportData(this.date,this.checkReportPage.perPage,this.checkReportPage.page)
    // 六大类占比图
    //this.getSixTypeData(this.date)
    // 购进信息
    this.getPurchaseCountInfo(this.date)
    // 获取南京天气
    this.getNJWeather(this.date)
  },
  methods: {
    // 20200303
    /*getDataEpay(year, month, day, id){
      let formData = new FormData()
      formData.append('id', id)
      formData.append('year', year)
      formData.append('month', month)
      formData.append('day', day)
      return this.$axios.post('http://119.3.131.211:8989/aggs/market/dailySales/epay', formData,{
        headers: {
          'Content-Type': 'multipart/form-data; charset=UTF-8'
        },
      })
    },
    getDataYesterdayEpay(year, month, day, id){
      let formData = new FormData()
      formData.append('id', id)
      formData.append('year', year)
      formData.append('month', month)
      formData.append('day', day)
      return this.$axios.post('http://119.3.131.211:8989/aggs/market/dailySales/epay', formData,{
        headers: {
          'Content-Type': 'multipart/form-data; charset=UTF-8'
        },
      })
    },*/
    getDataSales(year, month, day, id){
      let formData = new FormData()
      formData.append('id', id)
      formData.append('year', year)
      formData.append('month', month)
      formData.append('day', day)
      return this.$axios.post('http://119.3.131.211:8989/aggs/market/dailySales', formData,{
        headers: {
          'Content-Type': 'multipart/form-data; charset=UTF-8'
        },
      })
    },
    getDataYesterdaySales(year, month, day, id){
      let formData = new FormData()
      formData.append('id', id)
      formData.append('year', year)
      formData.append('month', month)
      formData.append('day', day)
      return this.$axios.post('http://119.3.131.211:8989/aggs/market/dailySales', formData,{
        headers: {
          'Content-Type': 'multipart/form-data; charset=UTF-8'
        },
      })
    },
    getSixTypeDataNew(marketId){
      this.$axios.post('https://www.cailanzi001.com/api/v7/market_statistics/market_sale_amount_by_business_type', {marketId}).then(res => {
        let max = 0
        for(let i = 0; i < res.data.length; i++){
          if (res.data[i].y > max) {
            max = res.data[i].y
          }
        }
        let ret = []
        for(let i = 0; i < res.data.length; i++){
          ret.push(res.data[i].y)
        }
        max = max * 1.1
        this.sixTypeOptionsNew = {
          tooltip: {},
          color: ['#2ec7c9'],
          legend: {
            data: ['交易额 (元)'],
            x: 'right'
          },
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                color: '#000'
              }
            },
            indicator: [
              { name: '蔬菜', max: max },
              { name: '猪肉', max: max },
              { name: '禽类', max: max },
              { name: '牛羊肉', max: max },
              { name: '蛋类', max: max },
              { name: '豆制品', max: max }
            ],
          },
          series: [{
            name: '交易额 (元)',
            type: 'radar',
            areaStyle: { normal: { color: '#2ec7c9' }},
            data: [
              {
                value: ret
              }
            ]
          }]
        }
      }).catch(error => {
        console.log(error)
      })
    },

    // 20200303




    // 总数据看板 123
    getTradingData(date){
      this.$store.dispatch('home/fetchTradingData',{date}).then(
        data => {

          this.tradingData.businessCount = data.businessCount
          /*this.unit1 = saleAmount(data.saleAmount / 1)[1]
          this.tradingData.saleAmount = parseFloat(saleAmount(data.saleAmount / 1)[0])
          this.tradingData.saleAmountTrend = trend(data.saleAmountTrend)
          this.tradingData.yesterdaySaleAmount = parseFloat(saleAmount(data.yesterdaySaleAmount / 1)[0])
          this.unit2 = saleAmount(data.yesterdaySaleAmount / 1)[1]

          this.tradingData.payNumber = parseInt(data.payNumber)
          this.tradingData.yesterdayPayNumber = data.yesterdayPayNumber
          this.tradingData.payNumberTrend = trend(data.payNumberTrend)*/

        }
      ).catch(err => {
        this.loading = false
      })
    },
    // 总数据看板 4
    getPeopleCountData(date){
      this.$store.dispatch('home/fetchPeopleCountData',{date}).then(
        data => {

          this.tradingData.today_count = parseInt(data.today_count)
          this.tradingData.yeserday_count = data.yeserday_count
          // this.tradingData.amount_trend = trend(data.amount_trend)
          if(data.amount_trend === '-'){
            this.tradingData.amount_trend = '-'
          }else{
            this.tradingData.amount_trend = data.amount_trend + '%'
          }

        }
      ).catch(err => {})
    },
    // 分时数据
    getChartLineBar(date,isExist){
      this.$store.dispatch('home/fetchChartList', {date,isExist})
    },
    // 检测信息
    getCheckReportData(date,perPage,page){
      this.$store.dispatch('home/fetchCheckReportData',{date,perPage,page}).then(
        data => {

          this.checkReportData = data.items
          this.checkReportPage.total = data.total

        }
      ).catch(err => {

        this.checkReportData = []
        this.checkReportPage.total = 0

      })
    },
    changeCheckReport(num){
      this.checkReportPage.page = num
      this.getCheckReportData(this.date,this.checkReportPage.perPage,num)
    },
    // 六大类占比图
    getSixTypeData(marketId){
      this.$store.dispatch('home/fetchSixTypeDataNew', {marketId})
    },
    // 购进信息
    getPurchaseCountInfo(date){
      this.$store.dispatch('purchaseInfo/fetchPurchaseCountInfo',{date}).then(
        data => {

          this.modal.porkExistPurchase = data.data.porkExistPurchase
          this.modal.porkNotExistPurchase = data.data.porkNotExistPurchase
          this.modal.beefExistPurchase = data.data.beefExistPurchase
          this.modal.beefNotExistPurchase = data.data.beefNotExistPurchase
          this.modal.soyExistPurchase = data.data.soyExistPurchase
          this.modal.soyNotExistPurchase = data.data.soyNotExistPurchase
          this.modal.chickenExistPurchase = data.data.chickenExistPurchase
          this.modal.chickenNotExistPurchase = data.data.chickenNotExistPurchase
          this.modal.eggExistPurchase = data.data.eggExistPurchase
          this.modal.eggNotExistPurchase = data.data.eggNotExistPurchase
          this.modal.vegeExistPurchase = data.data.vegeExistPurchase
          this.modal.vegeNotExistPurchase = data.data.vegeNotExistPurchase

        }
      ).catch(err => {})
    },
    // 获取南京天气数据
    getNJWeather(date){
      this.$store.dispatch('home/fetchNJWeather',{date}).then(
        data => {

          this.weather = data

        }
      ).catch(err => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    font-size: 14px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  .number{
    font-size: 28px;
    margin: 15px 0 13px;
    color: #333;
    font-weight: bolder;
    .money{
      font-size: 16px;
      font-weight: normal;
    }
  }
}
</style>
